<template>
	<view>
		<view class="navbar">
			<view style="height: 50rpx;"></view>
			<view class="input">
				<u-search bgColor="#f1f1f1" :showAction="false" shape="square" placeholder="请输入商品名称丶品牌丶型号"
					v-model="keyword">
				</u-search>
			</view>
		</view>
		<view class="tabs">
			<u-tabs @click="click" scrollable="false" :list="list4" lineWidth="30" lineColor="#1D2DA7" :activeStyle="{
		            color: '#1D2DA7',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 90rpx; padding-right: 90rpx; height: 34px;">
			</u-tabs>
		</view>

		<view v-show="tabs == 0">
			<view class="type">
				<view v-for="item in list" :key="item.id" @click="cut(item.id)"
					:class="{'stateStyle': style == item.id}">
					<text v-if="style == item.id"></text> {{item.name}}
				</view>
			</view>

			<view class="type-box">
				<view class="box-1">
					<view class="title">测量类</view>
					<view style="height: 10rpx;" class=""></view>
					<view class="sousuo">
						<view class=""> 尺类 </view>
					</view>
				</view>
				<view class="box-1">
					<view class="title">工具箱、包</view>
					<view style="height: 10rpx;" class=""></view>
					<view class="sousuo">
						<view class=""> 工具包 </view>
						<view class=""> 工具箱 </view>
					</view>
				</view>
			</view>
		</view>

		<view v-show="tabs == 1">
			<view class="brand">
				<view class="brand-title">推荐品牌 <image src="../../static/cuxiao.png" mode=""></image>
				</view>
				<view class="brand-img">
					<view class="" v-for="i in 4"></view>
				</view>
			</view>

			<view class="all-brand">
				<view class="brand-title">全部品牌</view>
				<view class="all-brand-box" v-for="i in 4">
					<view class="">
						<image class="logo" src="../../static/3m.png" mode=""></image>
						<text class="text">3M</text>
						<image class="img-2" src="../../static/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view v-show="tabs == 2">
			<view class="scene">
				<view @click="skip(item.name,item.id)" class="scene-item" v-for="item in list2">
					<view class="title"> <text>{{item.name}}</text>
						<image src="../../static/zhuixing.png" mode=""></image>
					</view>
					<view class="img">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: 0,
				style: 1,
				list: [{
					id: 1,
					name: '工具'
				}, {
					id: 2,
					name: '搬运工具'
				}, {
					id: 3,
					name: '工程机械'
				}, {
					id: 4,
					name: '办公'
				}, {
					id: 5,
					name: '润滑'
				}, {
					id: 6,
					name: '气动液压'
				}, {
					id: 7,
					name: '仪表'
				}, {
					id: 8,
					name: '胶粘'
				}, {
					id: 9,
					name: '传动密封'
				}, {
					id: 10,
					name: '气动液压'
				}, {
					id: 12,
					name: '气动液压'
				}],
				list4: [{
					name: '分类'
				}, {
					name: '品牌'
				}, {
					name: '场景'
				}],
				list2: [{
					id:1,
					name: '水泥行业',
					img: '../../static/changjing.png'
				},{
					id:2,
					name: '汽车制造场景',
					img: '../../static/changjing.png'
				},{
					id:3,
					name: '钢冶炼制',
					img: '../../static/changjing.png'
				}]
			}
		},

		methods: {
			cut(e) {
				this.style = e
			},
			click(item) {
				console.log('item', item);
				this.tabs = item.index
			},
			skip(x,y) {
				uni.navigateTo({
					url: '../scene/scene?name=' + x + '&id=' + y
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.navbar {
		width: 100%;
		height: 150rpx;
		background-color: #fff;


		.input {
			width: 480rpx;
			display: inline-block;
			margin-left: 30rpx;
		}
	}

	.tabs {
		padding: 20rpx 0 20rpx 0;
		background-color: #fff;
	}

	.type {
		background-color: #fff;
		display: inline-block;
		width: 26%;
		border-right: 1rpx solid #f5f5f5;
		height: 970rpx;
		overflow-y: auto;

		view {
			// display: inline-block;
			text-align: center;
			height: 100rpx;
			color: #222;
			font-size: 28rpx;
			line-height: 100rpx;

			text {
				display: inline-block;
				width: 6rpx;
				height: 30rpx;
				background-color: #1D2DA7;
				position: relative;
				top: 35rpx;
				float: left;
				left: 1rpx;
			}
		}

		.stateStyle {
			background-color: #f1f1f1;
		}
	}

	.type-box {
		width: 73%;
		overflow-y: auto;
		float: right;

		.box-1 {
			width: 100%;
			z-index: 9;
			position: relative;
			margin-top: 40rpx;

			.title {
				display: inline-block;
				color: #222;
				font-size: 30rpx;
				margin: 0 0 0 30rpx;
				font-weight: bold;
			}

			.sousuo {

				view {
					display: inline-block;
					// padding: 10rpx 40rpx;
					background-color: #fff;
					border-radius: 10rpx;
					margin: 20rpx 20rpx 0 20rpx;
					font-size: 28rpx;
					color: #222;

					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 74rpx;
					text-align: center;
					height: 74rpx;
					width: 170rpx;
				}
			}
		}
	}

	.brand {
		width: 94%;
		margin: auto;

		.brand-title {
			font-size: 36rpx;
			color: #222;
			font-weight: bold;
			margin-top: 20rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-left: 20rpx;
				position: relative;
				top: 5rpx;
			}
		}

		.brand-img {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			justify-content: center;
			justify-content: space-between;
			justify-content: space-around;

			view {
				width: 337rpx;
				height: 160rpx;
				background-color: #fff;
				margin-top: 20rpx
			}
		}
	}

	.all-brand {
		width: 94%;
		margin: auto;
		border-radius: 10rpx;

		.brand-title {
			font-size: 36rpx;
			color: #222;
			font-weight: bold;
			// margin-top: 30rpx;
			margin: 30rpx 0 20rpx 0;
		}

		.all-brand-box {
			background-color: #fff;

			view {
				height: 100rpx;

				.logo {
					width: 106rpx;
					height: 64rpx;
					position: relative;
					top: 18rpx;
					left: 17rpx;
				}

				line-height: 100rpx;

				.text {
					display: inline-block;
					margin-left: 40rpx;
					font-size: 30rpx;
				}

				.img-2 {
					width: 10rpx;
					height: 20rpx;
					float: right;
					margin-right: 20rpx;
					margin-top: 45rpx;
				}
			}
		}
	}

	.scene {
		width: 95%;
		margin: auto;

		.scene-item {
			.title {
				margin: 30rpx 0 20rpx 0;
				font-size: 32rpx;
				font-weight: bold;

				image {
					float: right;
					width: 20rpx;
					height: 15rpx;
					margin-top: 20rpx;
				}
			}

			.img {
				width: 100%;
				height: 280rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
